<script setup lang="ts">
import { onMounted, ref } from 'vue';
const props:any = defineProps({
  file: {
    required: true
  },
  languageType: {
    type: String,
    default: 'html'
  }
})

//  获取html 文件内容
async function getCodeContent(file) {
  const reader = new FileReader();
  reader.readAsText(file);
  return new Promise((resolve, reject) => {
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.onerror = (error) => {
      reject(error)
    }
  })
}
const htmlContent = ref('')
onMounted(() => {
  if(typeof props.file  == 'string') {
    htmlContent.value = props.file
    // 将html代码处理成 pre 内容
    // prismjs.highlightAll()
    // LanguageFn.registerLanguage(props.languageType, require('highlight.js/lib/languages/'+ props.languageType))
    return
  }
  getCodeContent(props.file)
  .then(res => {
    let html = res.toString()
    htmlContent.value = html
    console.log('htmlContent :>> ', htmlContent);
  })
})
</script>
<template>
  <div class="code-container">
    <!-- 把数据绑定到 `code` 属性-->
    <highlightjs autodetect :code="htmlContent" />
  </div>
</template>

<style lang="scss">
.code-container {
  pre {
    margin-bottom: 0;
  }
}

</style>
